<template>
  <div style="text-align: center">
    <h1 style="margin-left: 100px;color: #F56C6C">当前页面未找到,{{countDown}}秒后自动返回上一页<br>
      <el-link type="warning" @click="reback"><h2>(若无反应，请点击此返回上一页)</h2></el-link>
    </h1>
    <img :src="notFound" style="width: 800px;height: 500px;margin-left: 200px">
    <br><br>
  </div>
</template>

<script>
  export default {
    name: 'notFound',
    created () {
      this.notFound = require("@/assets/404.png")
      this.timer = setInterval(() =>{
        //创建定时器
        if(this.countDown === 1){
          this.clearTimer();  //关闭定时器
          this.$router.go(-1)
        }else{
          this.loading();
        }
      },1000);
    },
    data () {
      return {
        notFound: '',
        countDown: 3,
        timer: null
      }
    },
    methods: {
      reback() {
        this.clearTimer();  //关闭定时器
        this.$router.go(-1)
      },
      //启动定时器
      loading() {
        this.countDown--
      },
      //清除定时器
      clearTimer(){
        clearInterval(this.timer);
        this.timer = null;
      },
    }
  }
</script>

<style scoped>

</style>
